<template>
    <div class="contents">
        <img class="bg_s" src="http://test.bjclb.cn/uploads/assets/ydbg.png">
        <div style="width: 100%;position: sticky">
            <div class="title">工作台</div>
            <div v-if="type == 1">
                <div class="top">
                    <div class="f32 c24 f-w">PPT 创作-主题创建中</div>
                    <div class="c99 f26">输入您想要生成PPT的主题，AI帮您生成相关内容，完成后您可进行PPT文件下载。 </div>
                </div>
                <div class="c99 f24 t-c">15:11</div>
                <ul>
                    <li class="f30" style="">
                        <span>您好，我是您的专属PPTAI助手，今天需要我协助完成什么内容?</span>
                    </li>
                    <li class="f30 " style="flex-direction: row-reverse;">
                        <span class="cff" style="background: linear-gradient(90deg, #209CF5, #3872E8);">
                            关于特斯拉汽车实训室。</span>
                    </li>
                    <li class="step c33 f30">
                        您好，您的指令已发送，请点击下一步操作。
                        <div class="t-c">下一步</div>
                    </li>
                </ul>
            </div>
            <div v-if="type == 2" style="padding-bottom:calc( var(--van-tabbar-height));">
                <div style="padding-bottom:calc( var(--van-tabbar-height));">
                    <div class="top">
                        <div class="f32 c24 f-w">您好，请选择您想要的PPT模板样式 </div>
                        <div class="c99 f26">请在以下模板中选择您需要的模板样式，AI会根据您选择的模板样式帮您生成相关PPT内容。 </div>
                    </div>
                    <div class="c99 f24 t-c">15:11</div>
                    <div class="list">
                        <div class="lists" v-for="item in 10">
                            <img src="http://test.bjclb.cn/uploads/assets/ydbg.png" alt="">
                            <div>紫英幽兰</div>
                        </div>
                    </div>
                    <div class="buts">
                        <div class="t-c but" @click="next_step">下一步</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="return d-f j-c">
            <input placeholder="请输入您想生成的ppt主题" type="text" name="" id="">
            <div class="p-r">
                <img class="bgs" src="http://test.bjclb.cn/uploads/assets/return_.png" alt="">
                <img class="p-a" src="http://test.bjclb.cn/uploads/assets/return_s.png" alt="">
            </div>
        </div>
        <div class="loding p-f" v-if="shows">
            <div class="center t-c">
                <img class="loding1" src="http://test.bjclb.cn/uploads/assets/loding1.png" alt="">
                <div class="c99 f30">PPT生成中…</div>
                <div class="loding2 d-f">
                    <img :style="'width:' + num + '%;'" src="http://test.bjclb.cn/uploads/assets/loding2.png" alt="">
                </div>
                <div class="c33 f12">LOADING…</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>

import Navi from "./Navi.vue";
import { ref, onMounted } from "vue";
import router from "@/router";
const type = ref<number>(2);
const shows = ref<boolean>(false);
const num = ref<number>(0);

const next_step = async (val) => {
    console.log(val);
    shows.value = true
    var times = setInterval(function () {
        num.value = num.value + 10
        if (num.value >= 100) {
            clearInterval(times)
            shows.value = false
        }
        console.log(num.value);
    }, 1000);
};
</script>

<style lang="scss" scoped>
.center {
    position: fixed;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    width: 574px;
    background-image: url("http://test.bjclb.cn/uploads/assets/lodings.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
    padding-bottom: 40px;

    .loding1 {
        display: block;
        margin: 30px auto 13px auto;
    }

    .loding2 {
        width: 460px;
        height: 20px;
        background: #FFFFFF;
        border-radius: 6px;
        margin: 24px auto 16px auto;

        img {
            height: 16px;
            border-radius: 10px;
        }
    }

    .f18 {
        margin-top: 30px;
    }
}

.loding {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0, 0.3);
    z-index: 999;
}

.list {
    background: #FFFFFF;
    border-radius: 20px 20px 0px 0px;
    margin: 30px 40px 0 40px;
    padding: 30px 30px 30px 30px;
    display: flex;
    flex-wrap: wrap;

    .lists {
        background: #FCFDFF;
        border-radius: 12px;
        border: 1px solid #EBEBEB;
        width: 300px;
        margin-right: 26px;
        margin-bottom: 30px;

        &:nth-child(2n) {
            margin-right: 0;
        }

        div {
            padding-left: 22px;
            line-height: 68px;
            height: 68px;
        }

        img {
            width: 300px;
            height: 158px;
        }

    }

}

.buts {
    padding: 0 30px 30px 30px;
    background: #FCFDFF;
    margin: 0px 40px;

    .but {
        height: 88px;
        background: linear-gradient(90deg, #D2EBFD 0%, #D7E3FA 100%);
        border-radius: 20px;
        line-height: 88px;
    }
}

.return {
    position: fixed;
    bottom: var(--van-tabbar-height);
    left: 0;
    background-color: #fff;
    width: 100%;
    padding: 12px 0;

    input {
        width: 530px;
        height: 74px;
        background: #F5F5F5;
        border-radius: 37px;
        border: 0;
        margin-right: 20px;
        padding: 0 33px;
    }

    .bgs {
        width: 74px;
        height: 74px;
    }

    .p-a {
        left: 50%;
        top: 50%;
        width: 40px;
        height: 40px;
        transform: translate(-50%, -50%);
    }
}

.contents {
    z-index: 99;
}

ul {
    margin: 30px;
}

li {
    color: #333;
    display: flex;
    margin: 40px 0;

    span {
        border-radius: 20px 20px 20px 0px;
        padding: 26px 30px;
        background-color: #fff;
    }
}

.step {
    display: block;
    padding: 26px 30px;
    background-color: #fff;
    border-radius: 20px 20px 20px 0px;

    div {
        height: 88px;
        background: linear-gradient(90deg, #D2EBFD 0%, #D7E3FA 100%);
        border-radius: 20px;
        margin-top: 30px;
        line-height: 88px;
    }
}

.top {
    width: 690px;
    height: 195px;
    background-image: url("http://test.bjclb.cn/uploads/assets/phoneindex.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 30px auto;

    .f32 {
        padding: 30px;
    }

    .c99 {
        padding: 0 30px 30px 30px;
    }
}

.title {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    margin-bottom: 0;
    background-color: #247af1;
    color: #ffffff;
    font-weight: bold;
    font-size: 36px;
    height: 88px;
    line-height: 88px;
    text-align: center;
    z-index: 1;
}

.bg_s {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: inline-block;
}
</style>